<script type="text/ecmascript-6">
	/**
	 * Created by wcz on 2017/1/8.
	 */
    import b from '../bus'

	export default {
		data () {
			return {
				creditors: [],
				pageIndex: 1,
				pageSize: 15,
				total: 0,
				imgVisible: false,
				pointImgSlim: '',
				pointMsg: '',
                searchForm: {
                    state: '2'
                },
                cdn: window.cdn
			}
		},
		computed: {
            isListEmpty () {
                return this.creditors.length == 0
            }
        },
		mounted () {
			this.getList()
		},
		methods: {
			getList (currentPage = 1) {
                let pd   = {};
                pd.p     = currentPage;
                pd.s     = this.pageSize;
                pd.state = this.searchForm.state;

				this.get('/api/v1/upstreams', pd, {loading: 'xhrPending', err: '获取客户列表失败'})
					.then(res => {
					    if (res.success && res.data.rows) {
                            this.creditors = res.data.rows.map(e => {
                                let ele   = e;
                                ele.time = e.create_at.split(' ')[0];
                                return ele
                            });
                            this.pageIndex = res.data.page + 1;
                            this.total = res.data.total;
                        } else {
                            this.creditors = [];
                        }
					})
			},
			changeIndex (pi) {
				this.getList(pi)
			},
			viewImg (imgSrc, msg) {
				this.pointImgSlim = `${cdn}${imgSrc}?imageslim`;
				this.pointMsg     = msg;
				this.imgVisible   = true;
			},
			closeView () {
				this.imgVisible   = false;
				this.pointImgSlim = ''
			},
			pass (id) {
                let postData     = new FormData();
                postData.append('verify',  1);

                this.jax(`/api/v1/upstreams/${id}/verify`, postData, {err: '请求失败，请稍后再试'})
                    .then(res => {
                        if (res.success) {
                            this.msg('成功通过', 'success');
                            this.getList();
                            b.$emit('resCount');
                        }
                    })
			},
			refuse (id) {
                let postData     = new FormData();
                postData.append('verify',  0);

                this.jax(`/api/v1/upstreams/${id}/verify`, postData, {err: '请求失败，请稍后再试'})
                    .then(res => {
                        if (res.success) {
                            this.msg('拒绝成功', 'success');
                            this.getList();
                            b.$emit('resCount');
                        }
                    })
			},
			handleTabSelect (state) {
				this.searchForm.state = state;
				this.getList();
			}
		},
	};
</script>

<template>
    <div class="creditor">
        <el-menu default-active="2" mode="horizontal" @select="handleTabSelect" layout="row center-left">
            <el-menu-item index="2">待审查客户</el-menu-item>
            <el-menu-item index="1">已认证客户</el-menu-item>
            <div self="right" class="cb__bar-right" layout="row center-justify">

            </div>
        </el-menu>
        <div class="creditor__content" v-loading.body="xhrPending">
            <div class="wh-table">
                <div class="wh-table__thead" layout="row center-left">
                    <div class="th w30">公司全称 / 办公地址</div>
                    <div class="th w10">法人代表姓名</div>
                    <div class="th w20">联系人姓名 / 手机号 / 邮箱</div>
                    <div class="th w15">申请时间</div>
                    <div class="th w15">营业执照</div>
                    <div class="th w10 tac"><i class="el-icon-more"></i></div>
                </div>
                <div v-if="isListEmpty" class="wh-table__tbody--empty">无记录</div>
                <div v-else class="wh-table__tbody" layout="row center-left" v-for="(creditor, index) in creditors">
                    <div class="td w30">
                        <h5 class="wh-table__em">{{creditor.company_name}}</h5>
                        <p class="wh-table__lighter">{{creditor.address}}</p>
                        <p class="wh-table__lighter">{{creditor.username}}</p>
                    </div>
                    <div class="td w10">{{creditor.legal_person}}</div>
                    <div class="td w20">
                        <p class="wh-table__em">{{creditor.linkman}}</p>
                        <p class="wh-table__lighter">{{creditor.email}}</p>
                        <p class="wh-table__lighter">{{creditor.contact_phone}}</p>
                    </div>
                    <div class="td w15">{{creditor.time}}</div>
                    <div class="td w15 comments__view" @click="viewImg(creditor.business_license)">
                        <div class="wh-table__thumbnail" data-content="点击查看完整图片">
                            <img :src="cdn + creditor.business_license + '?imageView2/0/w/200'" class="wh-table__thumbnail-inner">
                        </div>
                    </div>
                    <div class="td w10" layout="row center-right" v-if="creditor.state == '2'">
                        <el-button type="primary" @click="pass(creditor.id)">通过</el-button>
                        <el-button type="danger" plain @click="refuse(creditor.id)">拒绝</el-button>
                    </div>
                </div>
                <!-- pagination-->
                <div v-if="!isListEmpty" class="wh-table__page" layout="row center-center">
                    <el-pagination
                            @current-change="changeIndex"
                            :current-page="pageIndex"
                            :page-size="pageSize"
                            :total="total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- viewImg-->
        <div v-if="imgVisible" class="img__modal" layout="column center-center">
            <i class="img__close el-icon-close" @click="closeView"></i>
            <p class="point__msg">{{pointMsg}}</p>
            <img :src="pointImgSlim" class="img__big"/>
        </div>
    </div>
</template>